<!-- start: PAGE TITLE -->
<section id="page-title" style="margin-bottom: 0px;">
    <div class="row">
        <div class="col-sm-8">
            <h1 class="mainTitle" translate="sidebar.nav.report.MAIN">{{ mainTitle }}</h1>
            <span class="mainDescription" translate="sidebar.nav.report.MAINDesc">A type of data structure in which each element is attached to one or more elements directly beneath it. The connections between elements are called branches. <small class="block">Webopedia - Online Tech Dictionary for IT Professionals</small></span>
        </div>
    </div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: BOOTSRAP NAV TREE -->
<div class="container-fluid container-fullw bg-grey">
    <div class="row" ng-controller="reportCtrl">
        <div class="col-md-3 col-sm-2 ">
            <div class="panel panel-white">
                <div class="panel-heading panel-light-grey border-light">
                    <h4 class="panel-title">
                        <p translate="sidebar.nav.report.LISTDesc">
                            This is a Tree directive for Angular JS apps that use Bootstrap CSS.
                        </p>
                    </h4>
                </div>
                <div class="panel-body" style="min-height:{{allheight}}px">
                    <div class="box-tree">
                        <span ng-if="doing_async">...loading...</span>
                        <abn-tree tree-data="my_data" tree-control="my_tree" on-select="my_tree_handler(branch)" expand-level="2" icon-leaf="ti-file" icon-expand="ti-plus" icon-collapse="ti-minus"></abn-tree>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9 col-sm-4 ">
            <!-- <div> -->
            <div class=" col-md-12 col-sm-12">
                <div class="panel panel-white">
                    <form role="form" class="form-inline" style="padding-top: 15px;padding-bottom:15px">
                        <span class="panel-title text-dark">日期选择：</span>
                        <div class="form-group">
                            <input type="text" class="form-control" style="border-color: #ff8533;" datepicker-popup="yyyy-MM-dd" ng-change="changeForm(parameters.paramDateFrom)" ng-model="parameters.paramDateFrom" max-date="parameters.paramDateTo" is-open="startOpened" hour-time=true
                                ng-init="startOpened = false" close-text="关闭" ng-click="startOpen($event)" />
                        </div>
                        <span class="panel-title text-dark">至</span>
                        <div class="form-group">
                            <input type="text" class="form-control" style="border-color: #ff8533;" datepicker-popup="yyyy-MM-dd" ng-change="changeTo(parameters.paramDateTo)" ng-model="parameters.paramDateTo" hour-time=true min-date="parameters.paramDateFrom" is-open="endOpened"
                                ng-init="endOpened = false" close-text="关闭" ng-click="endOpen($event)" />
                        </div>
                        <div class="form-group">
                            <button class="btn btn-light-orange" ladda="ldloading.expand_right" data-style="expand-right" ng-click="mdxquery()" type="button">搜索</button>
                        </div>
                        <!-- <div style="float: right"> -->
                        <!-- <div class="form-group" ng-if="reportName=='事件解决率统计'||reportName=='事件工作回顾'">
							<button ng-attr-class="{{activeParentGroup&&'btn btn-primary active'||'btn btn-primary'}}"
				                ng-click="toggleParentGroup()" ng-disabled="disabledParentGroup"  
				                type="button">隐藏父数据</button>
						</div> -->
                        <div class="form-group">
                            <a class="btn btn-green" ng-click="exportData()" ng-disabled="disabledParentGroup" type="button">导出</a>
                        </div>
                    </form>
                </div>
                <!-- </div>	           		 -->
            </div>
            <div class="col-md-12 col-sm-12 margin-top-5" id="list">
                <!-- <div class=" margin-top-5" id="list"> -->
                <div class="panel panel-white">
                    <div class="panel-heading panel-light-grey border-light">
                        <h4 class="panel-title">{{reportName}}</h4>
                    </div>
                    <div class="panel-body">
                        <div class="maskStyle" ng-if="isMask">
                            <div ladda="true" class="loadingDiv"></div>
                        </div>
                        <div style="text-align: center;padding:5px 5px" ng-if="shows&&!isMask">
                            <h1>{{empty}}</h1>
                        </div>
                        <div style="text-align: center;padding:5px 5px" ng-if="treeshow&&!isMask">
                            <h1>{{headers}}</h1>
                        </div>
                        <table class="table table-bordered " cellspacing="0" cellpadding="20" ng-if="!isMask">
                            <thread>
                                <tr ng-repeat="headers in rheaders" class="bg-blue">
                                    <th ng-repeat="header in headers" ng-class="header.thclass" style="text-align: center;" ng-attr-colspan="{{ header.colspan || 1 }}">
                                        <div ng-if="header.value.value" rel="header.rel" class="text-white">{{header.value.value}}</div>
                                    </th>
                                </tr>
                            </thread>
                            <tbody class="tbody-hover">
                                <tr ng-repeat="rowData in rRows">
                                    <th ng-repeat="fieldData in rowData" ng-if="fieldData.thclass" ng-class="fieldData.thclass" ng-attr-colspan="{{fieldData.colspan || 1 }}">
                                        <div rel="fieldData.value.rel">{{fieldData.value.value}}</div>
                                    </th>
                                    <td ng-repeat="fieldData in rowData" ng-if="!fieldData.thclass" class="data" ng-style="fieldData.rowStyle">
                                        <div ng-if="fieldData.value.value" class="datadiv" alt="fieldData.alt" rel="fieldData.rel">{{fieldData.value.value}}</div>
                                    </td>
                                    <!--<td ng-repeat="fieldData in rowData" ng-if="!fieldData.thclass" class="data" ng-style="fieldData.rowStyle"><div ng-if="fieldData.value.value" class="datadiv" alt="fieldData.alt" rel="fieldData.rel">{{fieldData.value.proption}}</div></td>-->
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-sm-12" id="serch">
                <div class="panel panel-white" ng-if="reportName!='事件解决率统计'&&reportName!='事件工作回顾'&&reportName!='事件详细资料'&&reportName!='变更类型统计'&&reportName!='变更类型与风险等级'">
                    <div class="panel-heading panel-light-grey border-light">
                        <h4 class="panel-title">{{reportName}}图</h4>
                    </div>
                    <div class="maskStyle" ng-if="isMask">
                        <div ladda="true" class="loadingDiv"></div>
                    </div>
                    <div ng-if="rRows[0][0]&&!isMask">
                        <canvas tc-chartjs chart-type="{{chartType}}" chart-data="chartData" chart-options="chartOptions" style="width:100%; height:350px;" chart-click="onChartClick(event)" auto-legend></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end: BOOTSRAP NAV TREE